<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2021-08-20 16:43:04
 * @Description: //列表功能
-->
<template>
    <div class="publicColumns">
        <div class="title">列表设置</div>
        <div class="publicContent">
            <div class="publicTitle">
                <p v-for="(item,index) in titleList" :key="index">{{item}}</p>
            </div>
            <vuedraggable class="wrapper" v-model="newColumns">
                <transition-group>
                    <div class="publicRow" v-for="(item,index) in newColumns" :key="index">
                        <p>{{item.label}}</p>
                        <p>
                            <!-- <el-input size="mini" v-model="item.width"/><span class="unit">px</span> -->
                            <el-select size="mini" v-model="item.width" placeholder="请选择列宽">
                                <el-option v-for="item in widthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <span class="unit">px</span>
                        </p>
                        <p>
                            <el-checkbox v-model="item.checked"></el-checkbox>
                        </p>
                        <p>
                            <el-radio v-model="item.radio" :label="true" @click.native.prevent="radioChange(item.radio,index)">{{hiddenValue}}</el-radio>
                        </p>
                    </div>
                </transition-group>
            </vuedraggable>
        </div>
        <div class="footerBtn">
            <el-button size="mini" type="primary" @click="submit()" :loading="isLoadingTitle" style="margin-right:20px">{{isLoadingTitle ?'提交中 ...' : '保 存'}}</el-button>
        </div>
    </div>
</template>

<script>
import vuedraggable from 'vuedraggable';
export default {
    name: "publicColumns",
    components: {
        vuedraggable
    },
    props:{
        columns:{
            type:Array
        },
        submitHandleClick:{
            type: Function
        },
        isLoadingTitle:{
            type:Boolean
        }
    },
    data() {
        return {
            titleList:['列名','宽度','显示列','排序列'],
            newColumns:JSON.parse(JSON.stringify(this.columns)),
            hiddenValue:'',
            widthOptions:[
                {
                    label:50,
                    value:50,
                },
                {
                    label:100,
                    value:100,
                },
                {
                    label:150,
                    value:150,
                },
                {
                    label:200,
                    value:200,
                },
            ]
        };
    },
    created() {
        // this.newColumns.map((item)=>{
        //     this.$set(item,'checked',true)
        //     this.$set(item,'radio',false)
        // })
        // 使用 vuedraggable在火狐浏览器下拖动会打开新的窗口  阻止事件冒泡
        document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
        }
    },
    mounted() {
    },
    async activated() {
    },
    computed: {
    },
    watch : {
    },
    methods: {
        /**
         * @Author: gonghairun
         * @description: 修改radio
         * @param {*}
         * @return {*}
         */        
        radioChange(value,key) {
            this.newColumns.map((item,index)=>{
                this.$set(item,'radio',false)
            })
            this.newColumns.map((item,index)=>{
                if (index == key) {
                    this.$set(item,'radio',!value)
                }
            })
        },
        /**
         * @Author: gonghairun
         * @description: 保存   
         * @param {*}
         * @return {*}
         */        
        submit() {
            // let filterData = this.newColumns.filter(item => item.checked == true )
            // this.submitHandleClick(filterData)
            this.submitHandleClick(this.newColumns)
        },
    }
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
